<template>
	<div class="card-fill layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<!-- 搜索区域 - 头部 -->
			<WtmSearcher v-model="searchData" @search="getTableData()" :showToggleAdvanced="false">
				<!-- 基础搜索条件 -->
				<template #default>
					<el-row :gutter="15">
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="RoleCode_FormItem" prop="RoleCode" :label="$t('message._admin.role.vm.RoleCode')">
								<el-input v-model="searchData.RoleCode" clearable placeholder="请输入角色编码"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="RoleName_FormItem" prop="RoleName" :label="$t('message._admin.role.vm.RoleName')">
								<el-input v-model="searchData.RoleName" clearable placeholder="请输入角色名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</template>
			</WtmSearcher>
			<div>
				<WtmButton
					v-auth="'/api/_FrameworkRole/Add'"
					icon="fa fa-plus"
					type="primary"
					:button-text="$t('message._system.common.vm.add')"
					@click="onCreate()"
				/>
				<WtmButton
					v-auth="'/api/_FrameworkRole/BatchDelete'"
					icon="fa fa-trash"
					type="danger"
					:button-text="$t('message._system.common.vm.batchdelete')"
					:disabled="!hasSelectedRows"
					:confirm="$t('message._system.common.vm.deletetip')"
					@click="onBatchDelete()"
				/>
				<WtmButton
					v-auth="'/api/_FrameworkRole/Import'"
					icon="fa fa-upload"
					type="primary"
					:button-text="$t('message._system.common.vm.import')"
					@click="onImport()"
				/>
				<WtmButton
					v-auth="'/api/_FrameworkRole/ExportExcel'"
					icon="fa fa-download"
					type="primary"
					:button-text="$t('message._system.common.vm.export')"
					@click="onExport()"
				/>
			</div>
			<WtmTable ref="tableRef" v-bind="tableData">
				<template #operation>
					<el-table-column :label="$t('message._system.common.vm.operate')" width="280">
						<template v-slot="scope">
							<div class="operation-container">
								<WtmButton
									v-auth="'/api/_FrameworkRole/Edit'"
									:is-text="true"
									icon="fa fa-pencil-square"
									type="warning"
									:button-text="$t('message._system.common.vm.edit')"
									@click="onEdit(scope.row)"
								/>
								<WtmButton
									v-auth="'/api/_FrameworkRole/{id}'"
									:is-text="true"
									icon="fa fa-info-circle"
									type="info"
									:button-text="$t('message._system.common.vm.detail')"
									@click="onDetail(scope.row)"
								/>
								<WtmButton
									v-auth="'/api/_FrameworkRole/BatchDelete'"
									:is-text="true"
									icon="fa fa-trash"
									type="danger"
									:button-text="$t('message._system.common.vm.delete')"
									:confirm="$t('message._system.common.vm.deletetip')"
									@click="onDelete(scope.row)"
								/>
								<WtmButton
									:is-text="true"
									icon="fa fa-key"
									type="primary"
									:button-text="$t('message._system.common.vm.action_privilege')"
									@click="onPrivilege(scope.row)"
								/>
							</div>
						</template>
					</el-table-column>
				</template>
			</WtmTable>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.menukey.RoleManagement;true;HengTong.Areas._Admin.Controllers;FrameworkRole">
import { defineAsyncComponent, reactive, onMounted, ref, getCurrentInstance, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import frameworkRoleApi from '/@/api/frameworkrole';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';

const ci = getCurrentInstance() as any;

// 引入组件
const createDialog = defineAsyncComponent(() => import('./create.vue'));
const editDialog = defineAsyncComponent(() => import('./edit.vue'));
const importDialog = defineAsyncComponent(() => import('./import.vue'));
const detailDialog = defineAsyncComponent(() => import('./detail.vue'));
const privilegeDialog = defineAsyncComponent(() => import('./privilege.vue'));
// 定义变量内容
const createDialogRef = ref();
const editDialogRef = ref();
const importDialogRef = ref();
const detailDialogRef = ref();
const privilegeDialogRef = ref();
const tableRef = ref();
const tableData = ref({
	// 列表数据（必传）
	data: [],
	// 表头内容（必传，注意格式）
	header: [
		{ key: 'RoleCode', colWidth: '', title: ci.proxy.$t('message._admin.role.vm.RoleCode'), width: 150, type: 'text', isCheck: true },
		{ key: 'RoleName', colWidth: '', title: ci.proxy.$t('message._admin.role.vm.RoleName'), type: 'text', isCheck: true },
		{ key: 'RoleRemark', colWidth: '', title: ci.proxy.$t('message._admin.role.vm.RoleRemark'), type: 'text', isCheck: true },
	],
	// 配置项（必传）
	config: {
		total: 0, // 列表总数
		loading: true, // loading 加载
		isSerialNo: true, // 是否显示表格序号
		isSelection: true, // 是否显示表格多选
		isOperate: true, // 是否显示表格操作栏
	},
});
const searchData = ref({
	RoleCode: null,
	RoleName: null,
});

// 初始化表格数据
const getTableData = () => {
	tableRef.value.doSearch(frameworkRoleApi().search, searchData.value).catch((error: any) => {
		other.setFormError(ci, error);
	});
};
// 打开新增弹窗
const onCreate = () => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.add'), createDialog, null, getTableData);
};
// 打开修改弹窗
const onEdit = (row: any) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.edit'), editDialog, row, getTableData);
};
const onDetail = (row: any) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.detail'), detailDialog, row, getTableData);
};

const onPrivilege = (row: any) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.action_privilege'), privilegeDialog, row, getTableData);
};

// 删除
const onDelete = (row: any) => {
	frameworkRoleApi()
		.delete([row.ID])
		.then(() => {
			getTableData();
		});
};
const onBatchDelete = async () => {
	const selectedRows = tableRef.value?.getSelectedRows();
	const selectedIds = selectedRows?.map((x: any) => x.ID);

	if (selectedIds && selectedIds.length > 0) {
		try {
			await frameworkRoleApi().delete(selectedIds);
			tableRef.value?.clearSelection();
			getTableData();
		} catch (error) {
			other.setFormError(ci, error);
		}
	} else {
		ElMessage.error(ci.proxy?.$t('message._system.common.vm.check') || '请选择要删除的数据');
	}
};
const onExport = () => {
	const selected = tableRef.value.getSelectedRows();
	if (selected.length > 0) {
		frameworkRoleApi().exportById(selected.map((x: any) => x.ID));
	} else {
		frameworkRoleApi().export({});
	}
};
const onImport = () => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.import'), importDialog, null, getTableData);
};

// 计算属性 - 判断是否有选中行
const hasSelectedRows = computed(() => {
	const selectedRows = tableRef.value?.getSelectedRows() || [];
	return selectedRows.length > 0;
});

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss"></style>
